<template>

  <mt-tabbar v-model="selected" class="tab-bar" fixed>
    <!-- <mt-tab-item id="home" @click.native="tabBar('home')">
      <img slot="icon" src="">
      首页
    </mt-tab-item> -->
    <mt-tab-item id="index" @click.native="tabBar('index')">
      <img slot="icon" src="../../assets/all.png">
      任务
    </mt-tab-item>
    <mt-tab-item id="user" @click.native="tabBar('user')">
      <img slot="icon" src="../../assets/account.png">
      我的
    </mt-tab-item>
  </mt-tabbar>

</template>

<script>
const routerMap = {
  index: 'Index',
  hello: 'Hello',
  user: 'User',
  home: 'Home',
};
const selectedMap = {
  index: 'index',
  hello: 'hello',
  joinTask: 'user',
  user: 'user',
  home: 'home',
};

export default {
  data() {
    return {
      selected: 'index',
    };
  },
  methods: {
    tabBar(item) {
      this.selected = item;
      this.$router.push({
        name: routerMap[this.selected],
      });
    },
  },
  mounted() {
    const selectedPath = this.$route.path;
    this.selected = selectedMap[selectedPath.slice(1) || 'index'];
  },
};
</script>

<style>

.tab-bar {
  color: #42b983;
}
.mint-tab-item-label {
  color: #42b983;
}

</style>
